<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      id="文字装饰1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :width="props.width"
      :height="props.height"
      preserveAspectRatio="none meet"
      viewBox="0 0 290 43"
    >
      <defs>
        <radialGradient
          id="radial-gradient"
          cx="0.5"
          cy="0.983"
          r="0.983"
          gradientUnits="objectBoundingBox"
        >
          <stop offset="0" :stop-color="states.color" />
          <stop offset="1" :stop-color="states.color2" stop-opacity="0" />
        </radialGradient>
        <clipPath id="clip-path">
          <rect id="蒙版" width="188" height="34" fill="none" />
        </clipPath>
        <radialGradient
          id="radial-gradient-4"
          cx="0.5"
          cy="0.5"
          r="0.492"
          gradientUnits="objectBoundingBox"
        >
          <stop offset="0" :stop-color="states.color" />
          <stop offset="1" :stop-color="states.color2" stop-opacity="0" />
        </radialGradient>
      </defs>
      <g id="编组_3" data-name="编组 3">
        <path
          id="矩形"
          d="M0,0H257L229.089,40.005A7,7,0,0,1,223.348,43H33.652a7,7,0,0,1-5.741-2.995Z"
          transform="translate(17)"
          opacity="0.548"
          fill="url(#radial-gradient)"
        />
        <path
          id="矩形-2"
          data-name="矩形"
          d="M0,0H290L257.9,40.357A7,7,0,0,1,252.421,43H37.579A7,7,0,0,1,32.1,40.357Z"
          opacity="0.417"
          fill="url(#radial-gradient)"
        />
        <path
          id="矩形-3"
          data-name="矩形"
          d="M0,0H231L203.089,40.005A7,7,0,0,1,197.348,43H33.652a7,7,0,0,1-5.741-2.995Z"
          transform="translate(30)"
          fill="url(#radial-gradient)"
        />
      </g>
      <g
        id="椭圆形备份_13"
        data-name="椭圆形备份 13"
        transform="translate(52 9)"
      >
        <rect
          id="蒙版-2"
          data-name="蒙版"
          width="188"
          height="34"
          fill="none"
        />
        <g
          id="椭圆形备份_13-2"
          data-name="椭圆形备份 13"
          clip-path="url(#clip-path)"
        >
          <ellipse
            id="椭圆形备份_13-3"
            data-name="椭圆形备份 13"
            cx="116"
            cy="10.5"
            rx="116"
            ry="10.5"
            transform="translate(-19 21)"
            opacity="0.723"
            fill="url(#radial-gradient-4)"
          />
        </g>
      </g>
      <text
        :x="states.x"
        :y="states.y"
        font-family="font"
        :font-size="states.fontSize"
        :fill="states.fontColor"
        style="text-anchor: middle"
      >
        {{ states.text }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;

onMounted(() => {
  states.value.x = "50%";
  states.value.y = "59%";
});
</script>

<style scoped lang="scss"></style>
